<template>
  <div class="talk">
    <div class="talk_collection">
      <p class="talk_font leftFolat">讨论收藏</p>
    </div>
    <div
      class="announce"
      v-for="item in discussList.slice(
        pageSize * (currentPage - 1),
        pageSize * currentPage
      )"
      v-bind:key="item.id"
    >
      <img :src="userInfo.avatar" class="leftFolat" />
      <p class="talk_peoson leftFolat">&nbsp; 发布的 {{ item.discussTitle }}</p>
      <i
        class="el-icon-star-off rightFloat"
        style="font-size: 30px; color: yellow;"
      ></i>
      <div class="mainly_text">{{ item.discussContext }}</div>
      <div class="single">{{ item.discussTag }}</div>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total,sizes, prev, pager, next"
        :total="discussList.length"
        style="margin-top:10px;"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/css/talk.css";

const defaultDiscussList = [
  {
    id: 1,
    discussTitle: "有关实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？",
    discussStatus: 1,
    createTime: "2022-02-20 22:07:58",
    updateTime: "2022-02-20 22:08:02",
    belongUsername: "丫丫",
  },
  {
    id: 2,
    discussTitle: "有关实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？",
    discussStatus: 1,
    createTime: "2022-02-20 22:07:58",
    updateTime: "2022-02-20 22:08:02",
    belongUsername: "丫丫",
  },
  {
    id: 3,
    discussTitle: "有关实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？",
    discussStatus: 1,
    createTime: "2022-02-20 22:07:58",
    updateTime: "2022-02-20 22:08:02",
    belongUsername: "丫丫",
  },
  {
    id: 4,
    discussTitle: "有关实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？",
    discussStatus: 1,
    createTime: "2022-02-20 22:07:58",
    updateTime: "2022-02-20 22:08:02",
    belongUsername: "丫丫",
  },
];
const vueUserInfo = {
  id: 1,
  username: "丫丫", //账号
  nickname: "小丫丫", //别名
  password: "1234567890",
  avatar: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  email: "19880030153@qq.com",
  phone: "19880030153",
  sex: 0,
};
export default {
  name: "talk",
  data() {
    return {
      discussList: [],
      userInfo: Object.assign({}, vueUserInfo),
      currentPage: 1,
      pageSize: 5,
    };
  },
  created() {
    this.getDiscussList();
  },
  methods: {
    getDiscussList() {
      this.discussList = defaultDiscussList;
      this.userInfo = vueUserInfo;
    },
    handleSizeChange(value){
      this.pageSize = value;
    }
  },
};
</script>

<style></style>
